<script setup>
import {onBeforeMount, reactive, ref} from "vue";
import {message} from "ant-design-vue";
onBeforeMount(() => {
  const user = localStorage.getItem('user')
  if(user){
    const information = user.split(" ")
    const req = information[4]
    console.log(req)
  }
})
const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not a valid email!',
  },
  string:{
    range:'${label} must be between ${min} and ${max}!'
  }
};
const formState = reactive({
  //登录
  user: {
    USER_ACCOUNT: '',
    USER_PASSWORD: '',
    CHECK:'',
  },

  //注册
  user2:{
    USER_NAME:'',
    USER_PASSWORD:'',
    EMAIL:'',
    CHECK:'',
  },
});
const disable = ref(false)
const getCode = ref("获取验证码")
const isGeting = ref(false)
const count = ref(60)
const sendEmail = (email) => {
  if(!email){
    message.error('email不能为空哦')
  }
  if(email && email.split("@").length == 2){
    console.log(true)
    const countDown = setInterval(() => {
      if (count.value < 1) {
        isGeting.value = false;
        disable.value = false;
        getCode.value = '获取验证码';
        count.value = 60;
        clearInterval(countDown);
      } else {
        isGeting.value = true;
        disable.value = true;
        getCode.value = count.value-- + 's后重发';
      }
    }, 1000);
  }
}
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const onFinish3 = () => {
  const userForPwdChange = {
    "EMAIL" : '',
    "USER_NEW_PASSWORD" : '',
    "CHECK" : ''
  }
  userForPwdChange.EMAIL = formState.user2.EMAIL
  userForPwdChange.USER_NEW_PASSWORD = formState.user2.USER_PASSWORD
  userForPwdChange.CHECK = formState.user2.CHECK
  console.log(userForPwdChange)

}
</script>

<template>
  <div class="main2">
    <h1 style="text-align: left">找回密码</h1>
    <h3 style="margin: 0 0 5%; text-align: right; color: #454646">
      <router-link style="color: #5470C6" to="/login">点此登录</router-link>
    </h3>
    <a-form
        :model="formState"
        v-bind="layout"
        name="nest-messages"
        :validate-messages="validateMessages"
        @finish="onFinish3"
        class="form2"
    >
      <a-form-item :name="['user2', 'USER_PASSWORD']" label="NewPassword" :rules="[{ required: true , min: 8, max: 20 }]">
        <a-input v-model:value="formState.user2.USER_PASSWORD" />
      </a-form-item>
      <a-form-item :name="['user2', 'EMAIL']" label="Email" :rules="[{ required: true, type: 'email' }]">
        <a-input v-model:value="formState.user2.EMAIL" />
      </a-form-item>
      <a-form-item :name="['user2', 'CHECK']" label="Check" :rules="[{required: true}]" >
        <a-input  style="width: 50%" v-model:value="formState.user2.CHECK" />
        <a-button style="margin-left: 5px; height: 31px" type="primary" :disabled="disable" :class="{ codeGeting:isGeting }" @click="sendEmail(formState.user2.EMAIL);">{{getCode}}</a-button>
      </a-form-item>
      <a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 8 }">
        <a-button class="button" type="primary" html-type="submit">Submit</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<style scoped>

</style>